<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>采购打印</title>
{$LOAD_STYLE.top|raw}
<style>
    .orderprint {
        width: 100mm;
        margin: 30px auto;
    }
    .f-title {
        font-size: 22px;
        margin-bottom: 20px;
        font-weight: bold;
        text-align: center;
    }
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: center;
    }
    th {
        background-color: #f2f2f2;
    }
    .data-row {
        cursor: pointer;
    }
    .data-row:hover {
        background-color: #f5f5f5;
    }
    .pear-btn {
        padding-left:30px;
        padding-right:30px;
        font-size: 16px;
        background-color: #428bca;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    .pear-btn:hover {
        background-color: #3071a9;
    }
</style>
</head>
<body>
<div class="orderprint">
    <div class="top">
        <div class="f-title">{$staff.store_name} / {$staff.name}</div>
    </div>
    <table>
        <thead>
            <tr>
                <th width="20%"><input type="checkbox" id="select-all" checked></th>
                <th width="20%">编号</th>
                <th width="20%">色号</th>
                <th width="20%">颜色名</th>
                <th width="20%">数量</th>
            </tr>
        </thead>
        <tbody>
            {volist name="Tinfo" id="v"}
            <tr class="data-row">
                <td><input type="checkbox" class="print-checkbox" checked data-id="{$v.id}"></td>
                <td>{$v.fabric_code}</td>
                <td>{$v.color_code}</td>
                <td>{$v.color_name}</td>
                <td>{$v.count} {$v.unit}</td>
            </tr>
            {/volist}
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5"><button class="pear-btn pear-btn-md pear-btn-primary" http_printer>打印采购标签</button></td>
            </tr>
        </tfoot>
    </table>
</div>

<script src="__JS__/jquery.1.8.3.js"></script>
<script src="__JS__/httpprinter.js"></script>
<script>
$(document).ready(function(){
    var originalPrintData = {$print_data|raw};
    
    // 行点击事件 - 切换复选框状态
    $('.data-row').click(function(e) {
        // 排除直接点击复选框的情况
        if ($(e.target).is('input[type="checkbox"]')) {
            return;
        }
        
        var checkbox = $(this).find('.print-checkbox');
        checkbox.prop('checked', !checkbox.prop('checked'));
        
        // 更新全选状态
        updateSelectAll();
    });
    
    // 复选框点击事件 - 阻止事件冒泡
    $('.print-checkbox').click(function(e) {
        e.stopPropagation();
        
        // 更新全选状态
        updateSelectAll();
    });
    
    // 全选/取消全选功能
    $("#select-all").click(function(e) {
        e.stopPropagation();
        var isChecked = $(this).prop('checked');
        $(".print-checkbox").prop('checked', isChecked);
    });
    
    // 打印按钮点击事件
    $("[http_printer]").click(function() {
        // 获取选中的复选框对应的ID（转换为数字）
        var selectedIds = [];
        $(".print-checkbox:checked").each(function() {
            selectedIds.push(parseInt($(this).data('id')));
        });
        
        if(selectedIds.length === 0) {
            alert("请至少选择一项要打印的内容");
            return;
        }
        
        // 过滤打印数据
        var filteredData = $.extend(true, {}, originalPrintData);
        filteredData.Data = filteredData.Data.filter(function(item) {
            return selectedIds.includes(item.id);
        });
        
        // 使用过滤后的数据打印
        var printer = new HttpPrinter('{$print["ip"]}','{$print["port"]}', filteredData);
        printer.print();
    });
    
    // 更新全选复选框状态
    function updateSelectAll() {
        var allChecked = $(".print-checkbox").length === $(".print-checkbox:checked").length;
        $("#select-all").prop('checked', allChecked);
    }
});
</script>
</body>
</html>